<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<%--导入头部数据--%>
<%@include file="/include/head_libs.jsp" %>
<body class="min-h-screen bg-base-300">
<%--Navbar--%>
<jsp:include page="/include/web_header.jsp"/>
<%--通过标志位获取是否加载影片数据--%>
<c:choose>
    <c:when test="${requestScope.hasMovieData == true}">
        <c:set value="${requestScope.movieLoveCards}" var="movieLoveCards" scope="page"/>
        <c:set value="${requestScope.moviePlayerCard}" var="moviePlayerCard" scope="page"/>
        <c:set value="${requestScope.movieDetailData}" var="movieDetailData" scope="page"/>
        <c:set value="${requestScope.movieDetailDataPlayUrls}" var="movieDetailDataPlayUrls" scope="page"/>
    </c:when>
    <c:otherwise>
        <c:redirect url="/home"/>
    </c:otherwise>
</c:choose>
<!-- Main Content -->
<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
        <!-- Video Player Section -->
        <div class="lg:col-span-3">
            <div class="bg-base-200 rounded-lg">
                <%--播放器--%>
                <div class="aspect-video bg-black relative">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <iframe id="iframe-player" class="hidden w-full h-full absolute inset-0"></iframe>
                        <video id="video-player" class="video-js w-full h-full absolute inset-0" controls
                               poster="<c:url value="/assets/img/play.png"/>" crossorigin="anonymous" playsinline
                               data-setup='{"playbackRates": [0.5, 1.0, 1.5, 1.75, 2.0, 2.5, 3.0]}'>
                            <source id="video-source" src="https://play.subokk.com/play/NbW3y9Eb/index.m3u8" type="application/x-mpegURL">
                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">
                                    supports HTML5 video
                                </a>
                            </p>
                        </video>
                    </div>
                </div>
            </div>

            <!-- Video Info -->
            <div class="mt-4 bg-base-200 rounded-lg p-4">
                <div class="stats shadow w-full">
                    <div class="stat">
                        <div class="stat-title">剧集名</div>
                        <div class="stat-value text-xl sm:text-2xl">${moviePlayerCard.title}</div>
                    </div>
                    <c:if test="${not empty movieDetailData.vodDuration}">
                        <div class="stat">
                            <div class="stat-title">时长</div>
                            <div class="stat-value text-xl sm:text-2xl">${movieDetailData.vodDuration}</div>
                        </div>
                    </c:if>
                    <div class="stat">
                        <div class="stat-title">更新至</div>
                        <div class="stat-value text-xl sm:text-2xl">${movieDetailData.vodRemarks}</div>
                    </div>
                </div>

                <div class="divider"></div>

                <div class="prose max-w-none">
                    <h2 class="text-xl font-bold mb-2">剧情简介：</h2>
                    <p><span>${movieDetailData.vodContent}</span></p>
                </div>

                <!-- 猜你喜欢 Section -->
                <div class="mt-8">
                    <h2 class="text-2xl font-bold mb-4">猜你喜欢</h2>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                        <!-- Recommended Items -->
                        <c:forEach items="${movieLoveCards}" var="movie">
                            <div class="card movie-card">
                                <figure class="relative pt-[56.25%]">
                                    <img src="${movie.image}" alt="${movie.title}"
                                         class="absolute inset-0 w-full h-full object-cover"/>
                                </figure>
                                <a class="card-body p-2" href="${ctx}/api/movie/detail?movieId=${movie.movieId}">

                                    <h3 class="card-title text-sm">${movie.title}</h3>
                                    <p class="text-xs text-gray-400">更新至${movie.episode}</p>
                                </a>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>

        <!-- Episode List -->
        <div class="lg:col-span-1">
            <div class="bg-base-200 rounded-lg p-4 sticky top-4">
                <div class="flex justify-between items-center mb-4 select-none">
                    <h3 class="text-lg font-bold">${applicationScope.appTitle}</h3>
                    <span class="text-sm">${movieDetailData.vodRemarks}</span>
                </div>
                <div id="playerTree" class="grid lg:grid-cols-3 grid-cols-3 gap-2 w-full text-nowrap text-sm">
                    <c:if test="${not empty movieDetailDataPlayUrls}">
                        <c:forEach items="${movieDetailDataPlayUrls}" var="entry">
                            <button id="playerBtn" class="btn btn-sm lg:btn-md" data-play-url="${entry.value}">
                                    ${entry.key}
                            </button>
                        </c:forEach>
                    </c:if>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 脚注 --%>
<jsp:include page="/include/footer_bar.jsp"/>
<jsp:include page="/include/hover_theme_controller.jsp"/>
</body>
<link href="<c:url value="/assets/css/video-js.min.css"/>" rel="stylesheet"/>
<script src="<c:url value="/assets/js/video.min.js"/>"></script>

<script>
    $(document).ready(function () {
        // 获取所有播放器按钮
        const playerButtons = $('.grid #playerBtn');

        // 排序按钮并为第一个按钮添加选中状态
        if (playerButtons.length > 1) {
            const sortedButtons = playerButtons.sort((a, b) => {
                const aText = $(a).text().trim();
                const bText = $(b).text().trim();
                const aNum = parseInt(aText.replace(/\D/g, ''), 10);
                const bNum = parseInt(bText.replace(/\D/g, ''), 10);
                return aNum - bNum;
            });

            const playerTree = $('#playerTree');
            playerTree.empty();  // 清空原有内容
            sortedButtons.appendTo(playerTree);  // 重新添加排序后的按钮
        }

        if (playerButtons.length > 0) {
            playerButtons.first().addClass('btn-primary');
        }

        // 获取各个播放器元素
        const videoPlayerEle = $('#video-player');
        const iframePlayerEle = $('#iframe-player');

        // 获取 Video.js 播放器实例
        const videoPlayer = videojs('video-player');

        // 设置默认选中的播放源
        const defaultPlayUrl = playerButtons.first().attr('data-play-url');
        console.log("Default play URL: " + defaultPlayUrl);
        setPlayerSource(defaultPlayUrl);

        // 处理按钮点击事件，更新视频源并播放
        playerButtons.on('click', function () {
            // 移除所有按钮的选中状态
            playerButtons.removeClass('btn-primary');

            // 给当前按钮添加选中状态
            $(this).addClass('btn-primary');

            // 获取当前按钮的数据属性 play-url
            let playUrl = $(this).attr('data-play-url');
            console.log("Selected play URL: " + playUrl);

            setPlayerSource(playUrl);
        });

        // 设置视频播放器源
        function setPlayerSource(playUrl) {
            // 获取视频文件的后缀
            const fileExtension = playUrl.split('.').pop();

            // 判断后缀类型并设置对应的 type
            let playType;
            if (fileExtension === 'm3u8') {
                playType = 'application/x-mpegURL';
                // 更新 Video.js 播放器的源和类型
                iframePlayerEle.hide();

                videoPlayer.src({
                    type: playType,
                    src: playUrl
                });

                // 重新加载视频并播放
                videoPlayer.pause();
                videoPlayer.load();
                // videoPlayer.play().catch(function(error) {
                //     console.error('播放失败:', error);
                // });
            } else {
                // 隐藏 videoPlayerEle 播放器
                videoPlayerEle.hide();

                // 添加外链播放属性
                iframePlayerEle.attr("src", playUrl);

                // 移除隐藏
                iframePlayerEle.show();
            }
            console.log("playUrl: ", playUrl)
        }
    });
</script>
<%--<script>--%>
<%--    document.addEventListener('DOMContentLoaded', function () {--%>
<%--        // 获取所有播放器按钮--%>
<%--        const playerButtons = Array.from(document.querySelectorAll('.grid #playerBtn'));--%>

<%--        // 排序按钮并为第一个按钮添加选中状态--%>
<%--        if (playerButtons.length > 1) {--%>
<%--            playerButtons.sort((a, b) => {--%>
<%--                const aText = a.textContent.trim();--%>
<%--                const bText = b.textContent.trim();--%>
<%--                const aNum = parseInt(aText.replace(/\D/g, ''), 10);--%>
<%--                const bNum = parseInt(bText.replace(/\D/g, ''), 10);--%>
<%--                return aNum - bNum;--%>
<%--            });--%>

<%--            const playerTree = document.getElementById('playerTree');--%>
<%--            playerTree.innerHTML = '';  // 清空原有内容--%>
<%--            playerButtons.forEach(button => {--%>
<%--                playerTree.appendChild(button);  // 重新添加排序后的按钮--%>
<%--            });--%>
<%--        }--%>

<%--        if (playerButtons.length > 0) {--%>
<%--            playerButtons[0].classList.add('btn-primary');--%>
<%--        }--%>

<%--        // 获取各个播放器元素--%>
<%--        const videoPlayerEle = document.getElementById("video-player");--%>
<%--        const iframePlayerEle = document.getElementById("iframe-player");--%>

<%--        // 获取 Video.js 播放器实例--%>
<%--        const videoPlayer = videojs('video-player');--%>

<%--        // 设置默认选中的播放源--%>
<%--        const defaultPlayUrl = playerButtons[0].getAttribute('data-play-url');--%>
<%--        console.log("Default play URL: " + defaultPlayUrl);--%>
<%--        setPlayerSource(defaultPlayUrl);--%>

<%--        // 处理按钮点击事件，更新视频源并播放--%>
<%--        playerButtons.forEach(function (button) {--%>
<%--            button.addEventListener('click', function () {--%>
<%--                // 移除所有按钮的选中状态--%>
<%--                playerButtons.forEach(function (btn) {--%>
<%--                    btn.classList.remove('btn-primary');--%>
<%--                });--%>

<%--                // 给当前按钮添加选中状态--%>
<%--                this.classList.add('btn-primary');--%>

<%--                // 获取当前按钮的数据属性 play-url--%>
<%--                let playUrl = this.getAttribute('data-play-url');--%>
<%--                console.log("Selected play URL: " + playUrl);--%>

<%--                setPlayerSource(playUrl);--%>
<%--            });--%>
<%--        });--%>

<%--        // 设置视频播放器源--%>
<%--        function setPlayerSource(playUrl) {--%>
<%--            // 获取视频文件的后缀--%>
<%--            const fileExtension = playUrl.split('.').pop();--%>

<%--            // 判断后缀类型并设置对应的 type--%>
<%--            let playType;--%>
<%--            if (fileExtension === 'm3u8') {--%>
<%--                playType = 'application/x-mpegURL';--%>
<%--                // 更新 Video.js 播放器的源和类型--%>
<%--                iframePlayerEle.setAttribute("style", "display: none;");--%>
<%--                // iframePlayerEle.remove();--%>

<%--                videoPlayer.src({--%>
<%--                    type: playType,--%>
<%--                    src: playUrl--%>
<%--                });--%>

<%--                // 重新加载视频并播放--%>
<%--                videoPlayer.pause();--%>
<%--                videoPlayer.load();--%>
<%--                // videoPlayer.play().catch(function(error) {--%>
<%--                //     console.error('播放失败:', error);--%>
<%--                // });--%>
<%--            } else {--%>
<%--                // 隐藏 videoPlayerEle 播放器--%>
<%--                // videoPlayerEle.remove();--%>
<%--                videoPlayerEle.setAttribute("style", "display: none;");--%>

<%--                // 添加外链播放属性--%>
<%--                iframePlayerEle.setAttribute("src", playUrl);--%>

<%--                // 移除隐藏--%>
<%--                iframePlayerEle.setAttribute("style", "display: block;");--%>
<%--            }--%>
<%--            console.log("playUrl: ", playUrl)--%>
<%--        }--%>
<%--    });--%>
<%--</script>--%>
</html>

<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html lang="en" data-theme="dark">--%>
<%--&lt;%&ndash;导入头部数据&ndash;%&gt;--%>
<%--<%@include file="/include/head_libs.jsp" %>--%>
<%--<body class="min-h-screen bg-base-300">--%>
<%--&lt;%&ndash;Navbar&ndash;%&gt;--%>
<%--<jsp:include page="/include/web_header.jsp"/>--%>
<%--&lt;%&ndash;通过标志位获取是否加载影片数据&ndash;%&gt;--%>
<%--<c:choose>--%>
<%--    <c:when test="${requestScope.hasMovieData == true}">--%>
<%--        <c:set value="${requestScope.movieLoveCards}" var="movieLoveCards" scope="page"/>--%>
<%--        <c:set value="${requestScope.moviePlayerCard}" var="moviePlayerCard" scope="page"/>--%>
<%--        <c:set value="${requestScope.movieDetailData}" var="movieDetailData" scope="page"/>--%>
<%--        <c:set value="${requestScope.movieDetailDataPlayUrls}" var="movieDetailDataPlayUrls" scope="page"/>--%>
<%--    </c:when>--%>
<%--    <c:otherwise>--%>
<%--        <c:redirect url="/home"/>--%>
<%--    </c:otherwise>--%>
<%--</c:choose>--%>

<%--<!-- Main Content -->--%>
<%--<div class="container mx-auto p-4">--%>
<%--    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">--%>
<%--        <!-- Video Player Section -->--%>
<%--        <div class="lg:col-span-3">--%>
<%--            <div class="bg-base-200 rounded-lg">--%>
<%--                &lt;%&ndash;播放器&ndash;%&gt;--%>
<%--                <div class="aspect-video bg-black relative">--%>
<%--                    <div class="absolute inset-0 flex items-center justify-center">--%>
<%--                        <video id="video-player" class="plyr" controls poster="<c:url value='/assets/img/play.png'/>"--%>
<%--                               crossorigin="anonymous" playsinline>--%>
<%--                            <!-- 默认播放源 -->--%>
<%--&lt;%&ndash;                            <source id="video-source" src="" type="video/mp4">&ndash;%&gt;--%>
<%--                            <source id="video-source" src="https://play.subokk.com/play/NbW3y9Eb/index.m3u8" type="application/x-mpegURL">--%>
<%--                        </video>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>

<%--            <!-- Video Info -->--%>
<%--            <div class="mt-4 bg-base-200 rounded-lg p-4">--%>
<%--                <div class="stats shadow w-full">--%>
<%--                    <div class="stat">--%>
<%--                        <div class="stat-title">剧集名</div>--%>
<%--                        <div class="stat-value text-xl sm:text-2xl">${moviePlayerCard.title}</div>--%>
<%--                    </div>--%>
<%--                    <c:if test="${not empty movieDetailData.vodDuration}">--%>
<%--                        <div class="stat">--%>
<%--                            <div class="stat-title">时长</div>--%>
<%--                            <div class="stat-value text-xl sm:text-2xl">${movieDetailData.vodDuration}</div>--%>
<%--                        </div>--%>
<%--                    </c:if>--%>
<%--                    <div class="stat">--%>
<%--                        <div class="stat-title">更新至</div>--%>
<%--                        <div class="stat-value text-xl sm:text-2xl">${movieDetailData.vodRemarks}</div>--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--                <div class="divider"></div>--%>

<%--                <div class="prose max-w-none">--%>
<%--                    <h2 class="text-xl font-bold mb-2">剧情简介：</h2>--%>
<%--                    <p><span>${movieDetailData.vodContent}</span></p>--%>
<%--                </div>--%>

<%--                <!-- 猜你喜欢 Section -->--%>
<%--                <div class="mt-8">--%>
<%--                    <h2 class="text-2xl font-bold mb-4">猜你喜欢</h2>--%>
<%--                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">--%>
<%--                        <!-- Recommended Items -->--%>
<%--                        <c:forEach items="${movieLoveCards}" var="movie">--%>
<%--                            <div class="card bg-base-100 shadow-xl">--%>
<%--                                <figure class="relative pt-[56.25%]">--%>
<%--                                    <img src="${movie.image}" alt="${movie.title}" class="absolute inset-0 w-full h-full object-cover"/>--%>
<%--                                </figure>--%>
<%--                                <div class="card-body p-2">--%>
<%--                                    <h3 class="card-title text-sm">${movie.title}</h3>--%>
<%--                                    <p class="text-xs text-gray-400">更新至${movie.episode}</p>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </c:forEach>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <!-- Episode List -->--%>
<%--        <div class="lg:col-span-1">--%>
<%--            <div class="bg-base-200 rounded-lg p-4 sticky top-4">--%>
<%--                <div class="flex justify-between items-center mb-4 select-none">--%>
<%--                    <h3 class="text-lg font-bold">${applicationScope.appTitle}</h3>--%>
<%--                    <span class="text-sm">${movieDetailData.vodRemarks}</span>--%>
<%--                </div>--%>
<%--                <div id="playerTree" class="grid lg:grid-cols-3 grid-cols-3 gap-2 w-full text-nowrap text-sm">--%>
<%--                    <c:if test="${not empty movieDetailDataPlayUrls}">--%>
<%--                        <c:forEach items="${movieDetailDataPlayUrls}" var="entry">--%>
<%--                            <button id="playerBtn" class="btn btn-sm lg:btn-md" data-play-url="${entry.value}" data-play-type="${entry.key}">--%>
<%--                                    ${entry.key}--%>
<%--                            </button>--%>
<%--                        </c:forEach>--%>
<%--                    </c:if>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</div>--%>

<%--&lt;%&ndash; 脚注 &ndash;%&gt;--%>
<%--<jsp:include page="/include/footer_bar.jsp"/>--%>
<%--<jsp:include page="/include/hover_theme_controller.jsp"/>--%>
<%--</body>--%>
<%--<link href="<c:url value="/assets/css/plyr.css"/>" rel="stylesheet"/>--%>
<%--<script src="<c:url value="/assets/js/plyr.js"/>"></script>--%>

<%--<script>--%>
<%--    document.addEventListener('DOMContentLoaded', function () {--%>
<%--        // 初始化 Plyr 播放器--%>
<%--        const player = new Plyr('#video-player', {--%>
<%--            autoplay: false,  // 设置自动播放--%>
<%--            settings: ['captions', 'quality', 'speed', 'loop'],  // 设置可用的设置项--%>
<%--        });--%>

<%--        // 获取所有播放器按钮--%>
<%--        const playerButtons = Array.from(document.querySelectorAll('.grid #playerBtn'));--%>

<%--        // 排序按钮并为第一个按钮添加选中状态--%>
<%--        if (playerButtons.length > 1) {--%>
<%--            playerButtons.sort((a, b) => {--%>
<%--                const aText = a.textContent.trim();--%>
<%--                const bText = b.textContent.trim();--%>
<%--                const aNum = parseInt(aText.replace(/\D/g, ''), 10);--%>
<%--                const bNum = parseInt(bText.replace(/\D/g, ''), 10);--%>
<%--                return aNum - bNum;--%>
<%--            });--%>

<%--            const playerTree = document.getElementById('playerTree');--%>
<%--            playerTree.innerHTML = '';  // 清空原有内容--%>
<%--            playerButtons.forEach(button => {--%>
<%--                playerTree.appendChild(button);  // 重新添加排序后的按钮--%>
<%--            });--%>
<%--        }--%>

<%--        if (playerButtons.length > 0) {--%>
<%--            playerButtons[0].classList.add('btn-primary');--%>
<%--        }--%>

<%--        // 获取视频元素和源--%>
<%--        const videoPlayer = document.getElementById('video-player');--%>
<%--        const videoSource = videoPlayer.querySelector('#video-source');--%>

<%--        // 处理按钮点击事件，更新视频源并播放--%>
<%--        playerButtons.forEach(function (button) {--%>
<%--            button.addEventListener('click', function () {--%>
<%--                // 移除所有按钮的选中状态--%>
<%--                playerButtons.forEach(function (btn) {--%>
<%--                    btn.classList.remove('btn-primary');--%>
<%--                });--%>

<%--                // 给当前按钮添加选中状态--%>
<%--                this.classList.add('btn-primary');--%>

<%--                // 获取当前按钮的数据属性 play-url 和 play-type--%>
<%--                let playUrl = this.getAttribute('data-play-url');--%>
<%--                let playType = this.getAttribute('data-play-type');--%>

<%--                console.log("Selected play URL: " + playUrl + " with type: " + playType);--%>

<%--                // 暂停当前播放--%>
<%--                player.pause();--%>

<%--                // 更新视频的源--%>
<%--                videoSource.setAttribute('src', playUrl);--%>
<%--                videoSource.setAttribute('type', playType === 'm3u8' ? 'application/x-mpegURL' : 'video/mp4');--%>

<%--                // 重新加载播放器并开始播放--%>
<%--                videoPlayer.load();  // 重新加载视频资源--%>
<%--                player.play();  // 播放视频--%>
<%--            });--%>
<%--        });--%>
<%--    });--%>
<%--</script>--%>
<%--</html>--%>
